<template>
  <div class="sanxia-3-box h-full">
    <div class="mb-2">
      <div class="sx-title">入库总数</div>
      <div class="sx-a-t">
        <NumberAnimation nid="rkzs_1_" :noneDivide="true" :numm="numObj.INCOUNTQTY" :numLen="numObj.INCOUNTQTY.toString().length"></NumberAnimation>
      </div>
    </div>
    <div class="block mb-2">
      <div class="text-white mb-2">已收货</div>
      <div class="flex">
        <div class="text-[#f0c350] text-xl mr-3">{{ numObj.RCV_PERCENTUM }}</div>
        <div class="text-[#8bb4e0] text-base">({{ numObj.INQTY }})</div>
      </div>
      <div>
        <Mod2 color="#e2b03d" title="已收货" :x-data="charData.TIME" :data="charData.A" v-if="charData.A && charData.TIME"></Mod2>
      </div>
    </div>
    <div class="block mb-2">
      <div class="text-white mb-2">已上架</div>
      <div class="flex">
        <div class="text-[#a5e5a8] text-xl mr-3">{{ numObj.PA_PERCENTUM }}</div>
        <div class="text-[#8bb4e0] text-base">({{ numObj.PAQTY }})</div>
      </div>
      <div>
        <Mod2 color="#86e594" title="已上架" :x-data="charData.TIME" :data="charData.B" v-if="charData.B"></Mod2>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import NumberAnimation from './mod/NumberAnimation.vue'
  import Mod2 from './mod/mod2.vue'
  export default defineComponent({
    name: 'UiSanxiaModel3',
    components: { NumberAnimation, Mod2 },
    mixins: [],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    setup() {
      const numObj = ref({
        INCOUNTQTY: 0, //入库总数量
        INQTY: 0, //收货数量
        PAQTY: 0, //上架数量
        PA_PERCENTUM: '0%', //收货百分比
        RCV_PERCENTUM: '0%', //上架百分比
      })
      const getNumber = () => {
        const method = 'wms.kanban.analyze.percrntum.query'
        request({
          url: GFCD('dams', 'domain') + '/wms/wms-web',
          method: 'post',
          data: {
            data: JSON.stringify({ '#LIMIT#': '1', '#PAGE_SIZE#': '10' }),
            method,
          },
        }).then((res) => {
          const _data = res.data[method].data[0]
          if (_data) {
            numObj.value = _data
          }
        })
      }
      const charData = ref({
        A: [],
        B: [],
        TIME: [],
      })
      const getChar = () => {
        const method = 'wms.kanban.analyze.tendency.query'
        request({
          url: GFCD('dams', 'domain') + '/wms/wms-web',
          method: 'post',
          data: {
            data: JSON.stringify({ '#LIMIT#': '1', '#PAGE_SIZE#': '10' }),
            method,
          },
        }).then((res) => {
          const _data = res.data[method].data
          if (_data) {
            charData.value.A = _data.map((v) => v.INQTY)
            charData.value.B = _data.map((v) => v.PAQTY)
            charData.value.TIME = _data.map((v) => v.TRANSACTION_TIME)
          }
        })
      }
      let time1 = null
      onMounted(() => {
        getNumber()
        getChar()
        time1 = setInterval(() => {
          getNumber()
          getChar()
        }, 1000 * 5)
      })
      onUnmounted(() => {
        clearInterval(time1)
      })

      return { numObj, charData }
    },
  })
</script>

<style lang="scss">
  .sanxia-3-box {
    .sx-title {
      color: #6bfef6;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
  .sx-a-t {
    .number-digital {
      justify-content: left;
      .number-item {
        color: #fff;
        width: 46px;
        margin-right: 4px;
        border: 2px solid #4aa5ba;
        border-radius: 10px;
      }
    }
  }
</style>
